"use client";

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";

export default function HeadBar({
  onRefresh,
  onCreate,
  onToggleTheme,
  onToggleSider,
  onAddConnection,
  onLocalConnection,
  isDarkMode,
  isSiderVisible,
}) {
  return (
    <header className={`headbar shadow-sm ${isDarkMode ? "dark" : "light"}`}>
      <div className="container-fluid px-3">
        <div className="d-flex align-items-center" style={{ height: 52 }}>
          {/* 左侧：侧边栏切换按钮 + 品牌标题 */}
          <div className="d-flex align-items-center">
            <button
              className="btn btn-sm btn-outline-secondary sider-toggle-btn mr-3"
              onClick={onToggleSider}
              title={isSiderVisible ? "隐藏侧边栏" : "显示侧边栏"}
            >
              {isSiderVisible ? "◀" : "▶"}
            </button>
            <div className="brand-title font-weight-bold">SQL View</div>
          </div>

          {/* 中间：空白区域 */}
          <div className="flex-grow-1"></div>

          {/* 右侧：功能按钮 */}
          <div className="d-flex align-items-center headbar-actions">
            <button
              className="btn btn-sm btn-success mr-2 action-btn"
              onClick={onAddConnection}
            >
              🔗 添加连接
            </button>
            <button
              className="btn btn-sm btn-info mr-2 action-btn"
              onClick={onLocalConnection}
            >
              💻 本地连接
            </button>
            <button
              className="btn btn-sm btn-outline-secondary mr-2 action-btn"
              onClick={onRefresh}
            >
              🔄 刷新
            </button>
            <button
              className="btn btn-sm btn-primary mr-2 action-btn"
              onClick={onCreate}
            >
              ➕ 新建
            </button>
            <button
              className="btn btn-sm btn-outline-dark theme-btn"
              onClick={onToggleTheme}
            >
              {isDarkMode ? "☀️ 白天" : "🌙 黑夜"}
            </button>
          </div>
        </div>
      </div>

      <style jsx>{`
        .headbar {
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          z-index: 100;
          border-bottom: 1px solid var(--border-color, #eee);
          transition: all 0.3s ease;
        }

        .headbar.light {
          background: #fff;
          color: #333;
        }

        .headbar.dark {
          background: #2d2d2d;
          color: #fff;
        }

        .sider-toggle-btn {
          min-width: 36px;
          height: 32px;
          padding: 0;
          font-size: 14px;
          line-height: 1;
          transition: all 0.2s ease;
          border-radius: 4px;
        }

        .sider-toggle-btn:hover {
          transform: scale(1.05);
        }

        .headbar.light .sider-toggle-btn {
          color: #666;
          border-color: #ddd;
          background: #fff;
        }

        .headbar.dark .sider-toggle-btn {
          color: #ccc;
          border-color: #555;
          background: #404040;
        }

        .headbar.light .sider-toggle-btn:hover {
          background: #f8f9fa;
          border-color: #bbb;
          color: #333;
        }

        .headbar.dark .sider-toggle-btn:hover {
          background: #555;
          border-color: #666;
          color: #fff;
        }

        .brand-title {
          color: var(--text-primary, #333);
          transition: color 0.3s ease;
        }

        .headbar-actions .action-btn {
          min-width: 64px;
          transition: all 0.2s ease;
        }

        .theme-btn {
          min-width: 80px;
          border-color: var(--border-color, #6c757d) !important;
          color: var(--text-primary, #333) !important;
          background: var(--bg-primary, #fff) !important;
        }

        .theme-btn:hover {
          background: var(--bg-secondary, #f8f9fa) !important;
          border-color: var(--text-secondary, #6c757d) !important;
        }

        .dark .btn-primary {
          background-color: #0d6efd;
          border-color: #0d6efd;
        }

        .dark .btn-outline-secondary {
          color: #ccc;
          border-color: #555;
        }

        .dark .btn-outline-secondary:hover {
          background-color: #555;
          border-color: #666;
          color: #fff;
        }
      `}</style>
    </header>
  );
}
